// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
import moment from 'moment'
// 引入antd的组件
import {
  Form,
  Row,
  Col,
  Input,
  InputNumber,
  Table ,
  Tabs,
  DatePicker,
  Select,
  Button,
  Modal,
  Tooltip,
  Typography,
  message,
  Radio,
  Popconfirm,
  Checkbox,
  Spin
} from 'antd'
// import FileViewer from 'react-file-viewer'
// 导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// import {  isEmpty, isArray, cloneDeep, chunk, set } from 'lodash'
import Uploader from 'widget/Upload'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './commissionsListReasonStyle.less'

import { CollapsiblePanels } from 'widget/CollapsiblePanels'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);

const { TextArea } = Input;
let test2;
const FormItem = Form.Item
const confirm = Modal.confirm;

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 15 },
}
const formItemLayout01 = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}
const formItemLayout02 = {
  labelCol: { span: 3},
  wrapperCol: { span: 21 },
}

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const commissionsListReasonView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFieldsAndScroll, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let {keys,selectedRows1,selectedRowKeys1,selectedRows,accountingModalObj,projectList,uploading,createFaymentMethodFlag,projectModalObj,actionType,id,detail,reasonModalObj} = modelObj
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      dispatch({
        type: `${namespace}/selectedKeysChange`,
        payload: {selectedRowKeys,selectedRows}
      })
    },
    type: 'radio'
  };
  const rowSelection1 = {
    onChange: (selectedRowKeys, selectedRows) => {
      dispatch({
        type: `${namespace}/selectedKeysChange1`,
        payload: {selectedRowKeys,selectedRows}
      })
    },
    type: 'checkbox'
  };
  
  const columns = [
    {
      title: "序号",
      dataIndex: '',
      key: '',
      width: 80,
      render: (a, item, index, d, e, f) => {
        return index+1
      },
    },
    {
      title: '区域',
      dataIndex: 'provinceName',
      key: 'provinceName',
    },
    {
      title: '省份',
      dataIndex: 'cityName',
      key: 'cityName',
    },
    {
      title: '项目',
      dataIndex: 'pname',
      key: 'pname',
    },
  ]
  //修改状态
  const changeState = (payload) => {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { ...payload }
    })
  }
  // 原因查询
  function selectReason(){
      console.log(detail);
      if(!detail.pkProject){
          return false;
      }
    dispatch({
      type: `${namespace}/selectReason`,
      payload: {}
    })
  }
  //关闭
  function onCancel(){
    routerGo()
  }
  // 详情页跳转
  function routerGo() {
    hashHistory.push({
      pathname: '/home/commissions/commissionsList',
      query: {}
    })
  }

  //项目名称弹窗事件 
  function updateProjectName(){
    projectModalObj.visible = !projectModalObj.visible
    changeState({ projectModalObj})
    dispatch({
      type: `${namespace}/selectProject`,
      payload: {}
    })
  }
  function confirmProject(){
    accountingModalObj.isTransferProperty = selectedRows[0]&&selectedRows[0].isTransferProperty?selectedRows[0].isTransferProperty:'0'
    accountingModalObj.projectId = selectedRows[0]&&selectedRows[0].projectId?selectedRows[0].projectId:''
    detail.projectName = selectedRows[0]&&selectedRows[0].pname?selectedRows[0].pname:''
    detail.pkProject = selectedRows[0]&&selectedRows[0].projectId?selectedRows[0].projectId:''
    createFaymentMethodFlag = false;
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag,accountingModalObj}
    })
    form.resetFields()
    updateProjectName()
  }
  // 搜索
  function inputSearch (value, name) {
    let obj = {[name]: value}
    accountingModalObj = Object.assign(accountingModalObj, obj)
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {accountingModalObj}
    })
  }
   //项目查询
   function searchFun(){
    dispatch({
        type: `${namespace}/selectProject`,
        payload: {}
    })
  }
  function clearFun(){
    accountingModalObj.projectName = ''
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {accountingModalObj}
    })
  }
  
  //表单改变时
  function inputChange (value, name) {
    createFaymentMethodFlag = false
    let obj = {[name]: value}
    detail = Object.assign(detail, obj);
    console.log(detail);
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {detail,createFaymentMethodFlag}
    })
  }
 
  return (
    <div className={cx('public_listMain')}>
      <div className="functionButton">
        <Button type='primary' disabled={actionType == 'check'}  onClick={() => { selectReason() }}>查询</Button>
        <Popconfirm placement="top" title={"是否确认关闭，确认后关闭页面，不保存数据。"} onConfirm={() => onCancel()} okText="确定" cancelText="取消">
          <Button>关闭</Button>
        </Popconfirm>
      </div>
      <CollapsiblePanels title="原因查询" hideUpDownBtn={true}>
        <Row>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="项目名称">
              {getFieldDecorator('projectName', {
                initialValue: detail.projectName,
                rules: [
                  { required: true, whitespace: true, message: '请输入项目名称', },
                ],
              })(<Input disabled={actionType == 'check'} readOnly={true}
                placeholder={'请输入项目名称'}
                onChange={(e) => { inputChange(e.target.value, 'projectName') }}
                onClick={() => { updateProjectName() }}
              />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col className="col" span={8}>
            <FormItem {...formItemLayout}
              label="电话">
               {getFieldDecorator('tel', {
                initialValue: detail.remark,
                rules: [
                  { required: true, whitespace: true, message: '请输入电话', },
                ],
              })(
              <Input placeholder={'请输入电话'} disabled={actionType == 'check'} onChange={(e) => { inputChange(e.target.value, 'tel') }}/>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={16}>
            <FormItem {...formItemLayout01}
              label="备注">
              {getFieldDecorator('remark', {
                initialValue: reasonModalObj.remark,
                rules: [
                  { required: false, whitespace: true, message: '', },
                ],
              })(
              <TextArea disabled style={{width:'97.6%'}} onChange={(e) => { inputChange(e.target.value, 'remark') }}></TextArea>
              )}
            </FormItem>
          </Col>
        </Row>
      </CollapsiblePanels>
      {/* 项目名称弹窗 */}
      <Modal
        title={'所属项目'}
        width='1000px'
        visible={projectModalObj.visible}
        destroyOnClose={true}
        onCancel={() => { updateProjectName() }}
        onOk={() => { confirmProject() }}
      >
           <div style={{marginBottom:'12px'}}>
            <Row>
            <Col span={2} style={{lineHeight:'28px'}}>
            <label>项目名称</label>:
            </Col>
            <Col span={6} style={{marginRight:'10px'}}>
            <Input  value ={accountingModalObj.projectName} placeholder="请输入项目名称" onChange={(e) => { inputSearch(e.target.value, 'projectName') }}/>
            </Col>
            <Col span={8}></Col>
            <Col span={6}>
                <Button type='primary' onClick={() => {searchFun()}}>查询</Button>
                <Button style={{marginLeft: '12px'}} onClick={() => {clearFun()}}>重置</Button>
            </Col>
            </Row>
        </div>    
        <div>
            <Table rowKey={(item, index) => {
                    return index
            }}  rowSelection={rowSelection} columns={columns} dataSource={projectList} type={'radio'}/>
        </div>
      </Modal>
      {uploading&&<div style={{position: "fixed",width: "100%",height: "100%",background: "rgba(204, 204, 204,.6)",zIndex: 9999999,top: "62px",textAlign: 'center',paddingTop:'200px',left:'168px'}}>
        <Spin tip="系统正在处理..."></Spin>
      </div>}
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(commissionsListReasonView))
